import React,{ Component } from 'react'
import { LegionsProPageContainer,LegionsProForm,LegionsProModal,LegionsProNumericInput,LegionsProConditions } from 'legions-pro-design';
import {
    Button,
    Steps,
    Row,
    Col,
    Spin,
    Icon,
    Card,
    Tabs,
    Input,
    Checkbox,
    Select,
    Radio,
    DatePicker,
    Table,
    Collapse,
    message
} from 'antd';
import { InstanceProForm } from 'legions-pro-design/es/LegionsProForm/interface';
import { InstanceProModal } from 'legions-pro-design/es/LegionsProModal/interface';
import { InstanceProTable } from 'legions-pro-design/es/LegionsProTable/interface';
import { bind,observer } from 'legions/store-react'
import ProjectStore from '../../stores/projectStore';
import { WrappedFormUtils } from 'legions-pro-design/es/interface/antd';
import { ProjectModules } from '../../interface/project';
import { observable,action,computed } from 'mobx';
import moment from 'moment';
import { debounce } from 'legions-utils-tool/debounce'
import { OPREATION_VIEW } from '../../constants/consts';
import TableListViewCanvas from './tableListView';
import FormInformationCanvas from './formInformation';
import LeftSider from '../../components/layout/leftSide';
import CreateProjectModule from '../project.module';
import { fullProvider,lazyInject,inject } from 'legions-control-container';
import CreateProjectFormConfig from '../../components/form.config/createProjectFormConfig';
import { FormCanvasDomain } from '../../services/components/formCanvasDomain';
import { QueryPropertyContainerVModel } from '../../models/queryPropertyVModel';
import { MapperEntity } from 'json-mapper-object';
import { PropertyQueryFormFields } from '../../models/form/propertyQueryFormFields';
import { TableListViewDomain } from '../../services/components/tableListViewDomain';
import { CreateFormCode,ICreateFormCodeProps } from '../../../common/components/create.code/createFormCode';
const serialize = require('serialize-javascript');
const { Step } = Steps;
const { TabPane } = Tabs;
const { MonthPicker,RangePicker } = DatePicker;
const { Panel } = Collapse;

interface IProps {
    store?: ProjectStore
    onCreatePageCode: () => void;
    onCreateCode: () => { modelCode: string; componentCode: string };
    onPreview: () => void
}
@bind({ store: ProjectStore })
@observer
export default class CanvasHomeEdit extends Component<IProps,{
    createCode: ICreateFormCodeProps['tabPanes']
}> {
    formRef: InstanceProForm = null;
    form: WrappedFormUtils = null;
    modalRef: InstanceProModal = null;
    createCodeModalRef: InstanceProModal = null;
    searchBtn = []
    colSpan = { left: 6,right: 18 }
    resize = debounce(() => {
        this.computedColSpan()
    },500)
    /** 项目模块表单配置类 */
    @lazyInject(CreateProjectFormConfig)
    projectModuleFormConfig!: CreateProjectFormConfig

    @lazyInject(FormCanvasDomain)
    formCanvasDomain!: FormCanvasDomain

    @lazyInject(TableListViewDomain)
    tableListViewDomain!: TableListViewDomain
    CREATE_PROJECT_CONFIG = {
        init: this.projectModuleFormConfig.createConfig,
    }
    constructor(props: IProps) {
        super(props)
        /* directiveSend({}) */
        this.state = {
            createCode: [],
        }
        /*  this.computedColSpan() */
    }
    componentDidMount() {
        window.addEventListener && window.addEventListener('resize',this.computedColSpan.bind(this))
    }
    computedColSpan() {
        const width = document.body.clientWidth;
        const mixSizeWith = 1440;
        this.props.store.projectEditViewModel.dispatchAction(() => {
            if (this.props.store.projectEditViewModel.sketchpadMode === 'draw') {
                if (width <= mixSizeWith) {
                    this.props.store.projectEditViewModel.colSpan = {
                        left: 5,
                        right: 19,
                    };
                    // tslint:disable-next-line: no-magic-numbers
                } else if (width > 1980) {
                    this.props.store.projectEditViewModel.colSpan = {
                        left: 5,
                        right: 19,
                    };
                }
                else {
                    this.props.store.projectEditViewModel.colSpan = {
                        left: 5,
                        right: 19,
                    };
                }
            }
        })

    }

    /** 页面模板类型切换 */
    onTabClick = (value: 'listPage' | 'formPage') => {
        this.props.store.projectEditViewModel.setCurrentTemplatePage(value);
    }
    /** 打开项目信息填充模态框 */
    onOpenProjectModal = () => {
        const store = this.props.store;
        this.props.store.basicModalViewModel.modalRef.viewModel.title = '填写页面或模块信息';
        this.props.store.basicModalViewModel.modalRef.viewModel.visible = true;
        store.projectEditViewModel.setCreateProjectType('update');
    }

    onClickAddFormElement(dataid: string) {
        this.formCanvasDomain.addFormElement(dataid);
    }

    render() {
        const store = this.props.store;
        const { currentTemplatePage,colSpan,sketchpadMode } = store.projectEditViewModel;
        const previewText = {
            draw: '预览',
            preview:'绘制',
        }
        return (
            <Row className="hl-project-canvas"  style={{ paddingBottom: '0px',paddingTop: '2px',background: 'rgb(236, 236, 236)' }}>
                {sketchpadMode==='draw'&&<Col span={colSpan.left} style={{ paddingLeft: '0px' }}>
                    <LeftSider defaultActiveKey={currentTemplatePage}
                        onTabClick={this.onTabClick}
                        onClickAddFormElement={this.onClickAddFormElement.bind(this)}
                        onClickAddQuery={this.tableListViewDomain.onClickAddQuery.bind(this.tableListViewDomain)}
                        onOperationAdd={this.tableListViewDomain.onOperationAdd.bind(this.tableListViewDomain)}></LeftSider>
                </Col>}

                <Col span={colSpan.right} style={{ paddingLeft: '0px',paddingRight: '0px' }}>
                    <Card title={(
                        <Row>
                            <Col span={2 * 5}>画布</Col>
                        </Row>
                    )} bordered={true} extra={
                        <React.Fragment>
                            <div style={{ width: '260px' }}>
                                {
                                    currentTemplatePage === 'listPage' && <Button type="primary" icon="desktop" onClick={() => {
                                        if (sketchpadMode === 'draw') {
                                            this.props.onPreview && this.props.onPreview()
                                        }
                                        else {
                                            this.props.store.projectEditViewModel.setSketchpadDrawMode()
                                        }
                                    }}>{previewText[sketchpadMode]}</Button>
                                }
                                <Button type="primary" onClick={() => {
                                    const value = this.props.onCreateCode();
                                    if (value) {
                                        const code: ICreateFormCodeProps['tabPanes'] = [];
                                        code.push({
                                            title: 'component',
                                            value: value.componentCode,
                                        })
                                        code.push({
                                            title: 'model',
                                            value: value.modelCode,
                                        })
                                        this.setState({
                                            createCode: code,
                                        })
                                        this.createCodeModalRef.viewModel.visible = true;
                                        if (currentTemplatePage === 'formPage') {
                                            this.createCodeModalRef.viewModel.title = '表单代码';
                                        }
                                        if (currentTemplatePage === 'listPage') {
                                            this.createCodeModalRef.viewModel.title = '数据列表代码';
                                        }
                                    }

                                }} style={{ marginLeft: '5px' }} icon="code">生成代码</Button>
                                <Button type="primary" icon="save" style={{ marginLeft: '5px' }} onClick={this.onOpenProjectModal}>保存</Button>

                            </div>

                        </React.Fragment>}>
                        {
                            currentTemplatePage === 'listPage' && <TableListViewCanvas onQueryPropertyClick={this.tableListViewDomain.onQueryPropertyClick.bind(this.tableListViewDomain)}></TableListViewCanvas>
                        }
                        {
                            currentTemplatePage === 'formPage' && <FormInformationCanvas></FormInformationCanvas>
                        }
                    </Card>
                    <LegionsProModal
                        onOk={(e) => {
                            if (store.projectEditViewModel.createProjectType === 'update') {
                                store.createProjectFormRef.viewModel.form.validateFields((error,value) => {
                                    if (!error) {
                                        store.basicModalViewModel.modalRef.viewModel.visible = false;
                                        store.projectEditViewModel.setCreateProjectType(null);
                                        this.props.onCreatePageCode && this.props.onCreatePageCode();

                                    }
                                    console.log(error)
                                })

                            }
                        }}
                        onReady={(value) => {
                            this.props.store.basicModalViewModel.modalRef = value;
                            const width = 550;
                            this.props.store.basicModalViewModel.modalRef.viewModel.width = width;
                        }}>
                        {store.projectEditViewModel.createProjectType && <CreateProjectModule controls={this.CREATE_PROJECT_CONFIG.init}></CreateProjectModule>}
                    </LegionsProModal>

                    <LegionsProModal
                        onReady={(value) => { // 生成代码预览对话框
                            this.createCodeModalRef = value;
                            this.createCodeModalRef.viewModel.width = 960;
                        }}>
                        <CreateFormCode tabPanes={this.state.createCode}></CreateFormCode>
                    </LegionsProModal>
                </Col>

            </Row>
        )
    }
}